<template>
  <div>
    <van-nav-bar
      fixed
      placeholder
      safe-area-inset-top
      title="推送租客"
      @click-left="back"
    >
      <template #left>
        <van-icon name="arrow-left" size="16px" color="#333" />
      </template>
    </van-nav-bar>
    <div
      v-show="guestlist.length != 0"
      class="guest"
      v-for="(item, index) in guestlist"
      :key="index"
    >
      <div>
        <div>
          <img
            src="@/assets/role03.png"
            alt=""
            v-if="item.sex == 1 || item.sex == 0"
          />
          <img src="@/assets/role01.png" alt="" v-if="item.sex == 2" />
          <div>{{ item.realname }}</div>
        </div>
        <div>
          <div>租房需求</div>
          <div>{{ item.rental_way }}</div>
          <div>价格范围 | {{ item.min_price }}~{{ item.max_price }}</div>
          <div>想住哪里 | {{ item.district }}</div>
          <div>房间户型 | {{ item.house_type }}</div>
        </div>
        <div>
          <button @click="goPush(item.uid)">推送</button>
        </div>
      </div>
      <div>
        <div @click="showLabel(item)" style="transform: translate(95px,-28px);height: 0;">
          <van-icon name="arrow-down" v-if="item.show == false" style="vertical-align:middle;"/>
          <van-icon name="arrow-up" v-if="item.show == true" style="vertical-align:middle;"/>
          <span style="font-size: 12px;">查看更多</span>
        </div>
        <div class="label">
          <div
            v-show="item.show == true && e != ''"
            v-for="(e, i) in item.tag"
            :key="i"
          >
            {{ e }}
          </div>
        </div>
      </div>
    </div>
    <div v-show="guestlist.length == 0" class="noguest">
      <img src="../../assets/nohouse.png" alt="" />
      <div>没有匹配的租客</div>
    </div>
  </div>
</template>

<script>
import { wantUserList, pushRent } from "@/apis/user";
import { _local } from "@/utils/storage";

export default {
  data() {
    return {
      guestlist: [],
      currentPage: 1,
      loading: true,
    };
  },
  created() {
    this.getUserList();
  },
  mounted() {
    window.addEventListener("scroll", this.showScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.showScroll);
  },
  methods: {
    showLabel(e) {
      e.show = !e.show;
      if (e.show && e.tag.length == 0) {
        this.$toast("暂无更多租客信息");
      }
    },
    showScroll() {
      const scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      const windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      const scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      if (scrollTop + windowHeight >= scrollHeight - 20 && this.loading) {
        this.currentPage++;
        wantUserList({
          citycode: _local.get("cityCode"),
          perPage: 10,
          currentPage: this.currentPage,
        }).then((res) => {
          console.log("wantUserList", res);
          if (res.code == 200 || res.code == 201) {
            this.guestlist = this.guestlist.concat(res.result);
            if (res.result.length != 10) {
              this.loading = false;
            }
          }
        });
      }
    },
    getUserList() {
      wantUserList({
        citycode: _local.get("cityCode"),
        perPage: 10,
        currentPage: 1,
      }).then((res) => {
        console.log("wantUserList", res);
        if (res.code == 200 || res.code == 201) {
          this.guestlist = res.result;
        }
      });
    },
    goPush(id) {
      pushRent({
        get_uid: id,
      }).then((res) => {
        console.log("pushRent",res)
        this.$toast(res.msg)
      });
    },
    back() {
      this.$router.go(-1);
    },
    showtip() {
      this.$toast("推送成功");
    },
  },
};
</script>

<style lang="less" scoped>
.guest {
  width: 92vw;
  overflow: hidden;
  margin: 10px 4vw;
  border-bottom: 1px solid #f1f1f1;
  padding-bottom: 10px;
  .label {
    display: flex;
    flex-wrap: wrap;
    & > div:not(:nth-child(4n)) {
      margin-right: 2.9vw;
    }
    & > div {
      font-size: 13px;
      background-color: #93d7e6;
      color: #097386;
      width: 20.8vw;
      height: 7.7vw;
      text-align: center;
      line-height: 7.7vw;
      border-radius: 14px;
      margin-bottom: 10px;
    }
  }
  & > div:nth-child(2) {
    & > div:nth-child(1) {
      text-align: center;
      color: #999;
    }
  }
  & > div:nth-child(1) {
    display: flex;
    justify-content: space-between;
    & > div:nth-child(3) {
      button:active {
        background-color: #45b7cb79;
        color: #999;
      }
      button {
        color: #fff;
        background-color: #45b7cb;
        border-radius: 17px;
        border: 0;
        font-size: 14px;
        width: 22.6vw;
        height: 9vw;
        text-align: center;
      }
    }
    & > div:nth-child(2) {
      & > div {
        margin-bottom: 10px;
      }
      & > div:nth-child(1) {
        font-weight: bold;
        font-size: 14px;
      }
      & > div:not(:nth-child(1)) {
        font-size: 12px;
      }
    }
    & > div:nth-child(1) {
      color: #45b7cb;
      font-size: 12px;
      text-align: center;
      & > div {
        margin-top: 10px;
      }
    }
    & > div:not(:nth-child(1)) {
      margin-top: 35px;
    }
  }
  img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
  }
}
.noguest {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  img {
    margin-top: 20px;
    width: 200px;
  }
  div {
    font-size: 16px;
    color: #333;
    font-weight: bold;
    margin-top: 20px;
  }
}
</style>